<template>
    <el-main>
        <el-row>
            <el-col :span="24">
                <el-form align="left" :inline="true" ref="form" :model="form" label-width="80px" size="mini">
                    <el-form-item label="数据匹配">
                        <el-input v-model="form.jiShuFangXiang"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetForm('form')">重置</el-button>
                        <el-button type="primary" @click="submitForm('form')">搜索</el-button>
                        <el-button type="primary" @click="submitForm('form')">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <TableCom :table="table" :tableDataArr="tableDataArr" :total="total">
                    <template v-slot:default="slotProps">
                        <el-button size="mini" @click="handleEdit(slotProps)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(slotProps)">删除</el-button>
                    </template>
                </TableCom>
            </el-col>
        </el-row>
    </el-main>

</template>

<script>
    import TableCom from '../components/TableCom'
    import {jishufangxiangFenye} from '../http/api'
    import {mapActions,mapState} from 'vuex'
    export default {
        name: "Jishufangxiang",
        components:{
            TableCom
        },
        computed:{
            ...mapState(['tableData']),
            tableDataArr(){
                return this.tableData.data
            },
            total(){
                return this.tableData.count
            }
        },
        data(){
            return{
                form:{
                    jiShuFangXiang:''
                },
                /*
               * table 控制tableCom组件的数据
               * tableTitle 控制tableCom组件显示哪些列 以及列名是什么
               * 例子   数据为   [{name:张三,age:'19,sex:'男'}]   如果只想在table内展示姓名和年龄  tableTitle 格式应为
               * [
               *   {prop:'name',title:'姓名'},
               *   {prop:'age',title:'年龄'},
               *]
               * operationSize:操作表格的固定长度
               * mohuChaxun:分页模糊查询的条件
               *
               * props  tableDataArr 是表组件的数据展示   total 是一共有多少条数据 用于分页
               * */
                table:{
                    tableTitle:[
                        {prop:'id',title:'ID'},
                        {prop:'jiShuFangXiang',title:'技术方向'},
                    ],
                    operationSize:180,
                    mohuChaxun:{}
                },

            }
        },
        methods:{
            ...mapActions(['selectTableData']),
            resetForm(formName) {
                console.log(formName)
                console.log(this.$refs[formName])
                this.$refs[formName].resetFields()
            },
            handleEdit(row){
                console.log(row)
            },
            handleDelete(row){
                console.log(row)
            },
        },
        created() {
            this.selectTableData({
                url:jishufangxiangFenye,
                params:{page:'1'}
            })
        }
    }
</script>

<style scoped>
    .el-main{
        line-height: normal;
    }
</style>